<template>
  <div class="hover:translate-y-[-3px] duration-100">
    <div
      :class="{'rounded-2xl': !isOpen, 'rounded-t-2xl': isOpen}"
      class="flex justify-between px-5 py-5 text-align-center bg-gradient-to-r from-cyan-500 to-blue-600"
      @click="isOpen=!isOpen">
      <div>
        <span class="text-white font-bold text-xl">{{ company.company_name }}</span>
        <span class="text-white ml-2 text-xs">{{ // company.project.length }}个项目</span>
      </div>
      <el-icon :size="20" color="#fff">
        <ArrowDownBold :class="{'rotate-180': isOpen}" class="duration-300" />
      </el-icon>
    </div>
    <div v-show="isOpen" class="bg-white h-70 shadow-xl rounded-b-xl pt-5 px-3">
      <div class="flex w-100 ml-10 justify-between">
        <div v-for="item in items" @click="item.click()">
          <el-icon class="mr-2">
            <component :is="item.icon"></component>
          </el-icon>
          <el-button type="text">
            <el-text v-text="item.text">
            </el-text>
          </el-button>
        </div>
      </div>

      <hr />
      <template v-if="index == Index.basicInfo">
<!--        <BasicInfo :basic-info="company.info" />-->
      </template>
      <template v-else-if="index == Index.projectContract">
<!--        <ProjectContract :data="company.project" />-->
      </template>
      <template v-else-if="index == Index.companyQualification">
<!--        <CompanyQualification :data="company.qualification" />-->
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ArrowDownBold, CircleCheck, DataAnalysis, Document} from "@element-plus/icons-vue";
import {type Component, ref} from "vue";
import type {CompanyDTO} from "../types";

let {company} = defineProps<{
  company: CompanyDTO
}>();

type item = {
  text: string,
  icon: Component,
  click: () => void
}
const items: Array<item> = [
  {
    text: '基础信息',
    icon: DataAnalysis,
    click: () => {
      index.value = Index.basicInfo
    }
  },
  {
    text: '项目合同',
    icon: Document,
    click: () => {
      index.value = Index.projectContract
    }
  },
  {
    text: "公司资质",
    icon: CircleCheck,
    click: () => {
      index.value = Index.companyQualification
    }
  }
]

const Index = {
  basicInfo: 0,
  projectContract: 1,
  companyQualification: 2
} as const;

type IndexType = typeof Index[keyof typeof Index];

const index = ref<IndexType>(Index.basicInfo);

const isOpen = ref(false)
</script>

<style scoped>

</style>